<template>
  <div class="app-container">
    <el-radio-group v-model="tabPosition" class="centered-radio-group"
      style="margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center;">
      <el-button-group style="float: left; margin-right: 20px;">
        <el-button type="primary" icon="el-icon-arrow-left" @click="goToIndex">首页</el-button>
      </el-button-group>
      <div style="flex-grow: 1; text-align: center;">
        <el-radio-button label="top">菜单靠上</el-radio-button>
        <el-radio-button label="right">菜单靠右</el-radio-button>
        <el-radio-button label="bottom">菜单靠下</el-radio-button>
        <el-radio-button label="left">菜单靠左</el-radio-button>
      </div>
      <el-button-group style="float: right; margin-right: 20px;">
        <el-button type="primary" class="custom-help-button" @click="goToHelp">使用帮助</el-button>
      </el-button-group>
    </el-radio-group>
    <el-tabs v-model="activeTab" :tab-position="tabPosition" @tab-click="handleClick">
      <el-tab-pane label="仓库概况" name="index" :lazy="true">
        <LibraryIndex />
      </el-tab-pane>
      <el-tab-pane label="货区信息" name="region" :lazy="true">
        <Region />
      </el-tab-pane>
      <el-tab-pane label="货位信息" name="position" :lazy="true">
        <Position />
      </el-tab-pane>
      <!-- <el-tab-pane label="货品信息" name="goods">
        <Goods />
      </el-tab-pane> -->
      <!-- 我自己的东西 -->
      <el-tab-pane label="仓库概况" name="wareIndex" :lazy="true">
        <wareHouse />
      </el-tab-pane>
      <el-tab-pane label="货区信息" name="areaInformation">
        <areaInformation />
      </el-tab-pane>
      <el-tab-pane label="货位信息" name="location">
        <Location></Location>
      </el-tab-pane>
    </el-tabs>

    <!-- 新增验证分布---用于 新增列表 表单的覆盖层 -->
    <div v-if="showInform" class="overlay">
      <!-- 新报告表单的内容放在这里 -->
      <div class="new-report-form scrollable-form">
        <el-form :model="newReportForm" label-position="top">
          <el-form-item style="border-bottom: 1px solid #c8cbd3">
            <el-button style="margin-bottom: 10px" @click="goToReturn">返回</el-button>
          </el-form-item>
          <!-- 通过组件引入的新页面 -->
          <el-form-item class="new-form-item">
            <NewHumForm @saved="goToHelpSave" />
          </el-form-item>
          <el-form-item style="border-top: 1px solid #c8cbd3">
            <el-button style="margin-top: 10px" @click="goToReturn">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>

import LibraryIndex from './libraryIndex.vue'
import Library from './library.vue'

import Region from './region.vue'

import Position from './position.vue'

import Goods from './goods.vue'

import Tray from './tray.vue'

import NewHumForm from './others/addWlist.vue'

import LibraryTest from './libraryTest.vue'
import wareHouse from './wareHouse.vue'
import areaInformation from './areaInformation.vue'
import Location from './location.vue'




export default {
  name: 'App',
  components: {
    LibraryIndex,
    Library,
    Region,
    Position,
    Goods,
    Tray,
    NewHumForm,
    LibraryTest,
    wareHouse,
    areaInformation,
    Location
  },
  data() {
    return {
      tabPosition: 'left',
      showInform: false, // 新增列表弹出页显示状态
      activeTab: 'index',  // 默认选中的 tab
    };
  },
  methods: {
    // 跳转到首页
    goToIndex() {
      // 使用 Vue Router 跳转到首页路径
      this.$router.push('/index');
    },
    // 跳转到help页
    goToHelp() {
      // 自定义导航方法
      // this.$router.push('/help');
    },
    // 增加列表
    goToHelp() {
      this.showInform = true
    },
    goToReturn() {
      this.showInform = false
    },
    handleClick(tab, event) {
      this.$router.push({ path: '/libraryExcess', query: {} });
    }
  },
  watch: {
    '$route.query.tab': {
      immediate: true,
      handler(newTab) {
        if (newTab) {
          this.activeTab = newTab;
        }
      }
    }
  },
}
</script>

<style scoped>
/* 放大字体 */
/* ::v-deep .el-tabs__item.is-active {
  font-size: 25px;
} */

/* 设定所有标签的字体大小 */
::v-deep .el-tabs__item {
  font-size: 18px;
  /* height: 15px; */
}

/* 让 el-radio-group 的内容居中 */
.centered-radio-group {
  display: flex;
  justify-content: center;
  /* 让内容水平居中 */
}
</style>
<style scoped>
.custom-help-button {
  /* 移除默认图标的空间 */
  padding-left: 30px;
  /* 确保文本和图标不会重叠 */
  position: relative;
}

.custom-help-button::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url('../../assets/index/card_help.png');
  /* 自定义图标路径 */
  background-size: cover;
  position: absolute;
  left: 10px;
  /* 调整图标位置 */
  top: 50%;
  transform: translateY(-50%);
}
</style>

<!-- 点击弹出使用帮助页面 -->
<style scoped>
.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  /* 半透明黑色覆盖层 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.new-report-form {
  background: white;
  width: 50%;
  /* 占据屏幕宽度的一半 */
  height: 100vh;
  /* 占据整个屏幕高度 */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.new-form-item {
  height: 100%;
  /* 充满整个父容器高度 */
}

.button-group {
  margin-top: 10px;
  text-align: right;
}

.scrollable-form {
  overflow-y: auto;
  /* 在需要时启用表单的垂直滚动 */
}
/* 我自己的样式 */
.el-tabs{
  height: calc(100% - 66px);
}
/deep/.el-tabs__content,/deep/.el-tab-pane{
  height: 100%;
  overflow-y: auto;
}
</style>
